import React, { Component } from 'react';
import { createPortal } from 'react-dom';
import { Icon,Tag,Table } from 'antd';
import { getColumns, getDatalist } from '../../common/columnsReport';

const modalRoot = document.getElementById('dialog-root');

class TablePanel extends Component {
  constructor(props) {
    super(props);
    this.el = document.createElement('table_panel_report');
  }

  componentDidMount() {
    modalRoot.appendChild(this.el);
  }

  render() {
    const { style, height, rendererItem, title } = this.props;
    const dtTitle = title;
    // 根据不同的id获取columns
    const columnDefine = getColumns(rendererItem.id);
    //暂将datalist写在前台
    const dataList = getDatalist(rendererItem.id);
    return createPortal(
      <div
        style={{
          ...style,
          height: height,
          display: 'flex',
          flexDirection: 'column',
          color: '#fff',
          backgroundColor: 'rgba(0,0,0,0.6)',
          // boxShadow:' -10px 0px 15px rgba(78,166,240,0.23) inset, 0px -10px 15px rgba(78,166,240,0.23) inset, 10px 0px 15px rgba(78,166,240,0.23) inset,  0px 10px 15px rgba(78,166,240,0.23) inset'
          boxShadow: '0 1px 2px rgba(0,0,0,0.16), 0 1px 2px rgba(0,0,0,0.23)',
        }}
      >
        <div
          style={{
            lineHeight: '35px',
            height: 35,
            borderBottom: '1px solid rgb(238, 238, 238,0.2)',
            textAlign: 'center',
            fontWeight: 'bold'
          }}
        >
          <div style={{ float: 'left', marginLeft: 6, fontSize: 15, fontWeight: 'bold' }}>
            <div
              style={{
                float: 'left',
                width: 5,
                height: 35,
                marginRight: 10,
                backgroundColor: 'rgba(63,177,277,1)',
              }}
            />
            {dtTitle}
          </div>
        </div>
        <div style={{ margin: '3px 8px 3px 8px' }}>
          <Table
            style={{ backgroundColor: 'rgba(0,0,0,0)', color: '#fff',cursor: 'pointer'}}
            size="middle"
            dataSource={dataList}
            columns={columnDefine}
            pagination={false}
            rowKey="id"
            scroll={{ y: height - 100 }}
          />
        </div>
      </div>,
      this.el
    );
  }
}

export default TablePanel;
